<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图书管理系统 - 图书修改</title>
	<!-- 引入Pacifico字体 -->
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<!-- 引入Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- 引入Font Awesome图标 -->
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- 配置Tailwind自定义颜色 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#0EC4C4',      // 主青色
						secondary: '#089292',    // 深青色
						accent: '#E6FFFA',       // 浅青色背景
					},
					fontFamily: {
						pacifico: ['Pacifico', 'cursive'],
					},
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		@layer utilities {
			.form-input-focus {
				@apply focus:border-primary focus:ring-2 focus:ring-primary/30 focus:outline-none;
			}
			.btn-hover {
				@apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
			}
			.card-shadow {
				@apply shadow-lg shadow-primary/20;
			}
		}
	</style>
</head>
<body class="bg-gradient-to-br from-accent to-white min-h-screen font-sans">
<div class="container mx-auto px-4 py-16 md:py-24">
	<!-- 页面标题 -->
	<div class="text-center mb-10">
		<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-pacifico text-secondary relative inline-block">
			图书管理系统
			<span class="absolute -bottom-2 left-0 w-full h-1 bg-primary rounded-full"></span>
		</h2>
	</div>

	<!-- 表单卡片 -->
	<div class="max-w-md mx-auto bg-white rounded-2xl p-8 card-shadow transform transition-all duration-500 hover:shadow-xl">
		<h3 class="text-[clamp(1.3rem,3vw,1.8rem)] font-pacifico text-secondary mb-6 text-center">
			<i class="fa fa-book mr-2 text-primary"></i>图书修改
		</h3>

		<form action="/book/execu_editBook" method="post" class="space-y-5">
			<!-- 隐藏的图书ID -->
			<input type="hidden" value="#(book.bookId)" class="w-full rounded-lg border-gray-300 border p-3" name="bookId">

			<!-- 书名输入 -->
			<div class="relative">
				<label for="bookName" class="block text-gray-700 mb-1 text-sm">书名</label>
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-font text-primary/70"></i>
				</div>
				<input type="text" id="bookName"
					   value="#(book.bookName)"
					   placeholder="请输入书名"
					   name="bookName"
					   class="w-full rounded-lg border-gray-300 border p-3 pl-10 form-input-focus transition-all duration-300">
			</div>

			<!-- 价格输入 -->
			<div class="relative">
				<label for="bookPrice" class="block text-gray-700 mb-1 text-sm">价格</label>
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-money text-primary/70"></i>
				</div>
				<input type="number" id="bookPrice"
					   value="#(book.bookPrice)"
					   placeholder="请输入价格"
					   name="bookPrice"
					   step="0.01"
					   class="w-full rounded-lg border-gray-300 border p-3 pl-10 form-input-focus transition-all duration-300">
			</div>

			<!-- 作者输入 -->
			<div class="relative">
				<label for="bookAuthor" class="block text-gray-700 mb-1 text-sm">作者</label>
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-user text-primary/70"></i>
				</div>
				<input type="text" id="bookAuthor"
					   value="#(book.bookAuthor)"
					   placeholder="请输入作者"
					   name="bookAuthor"
					   class="w-full rounded-lg border-gray-300 border p-3 pl-10 form-input-focus transition-all duration-300">
			</div>

			<!-- 库存输入 -->
			<div class="relative">
				<label for="bookNum" class="block text-gray-700 mb-1 text-sm">库存</label>
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-cubes text-primary/70"></i>
				</div>
				<input type="number" id="bookNum"
					   value="#(book.bookNum)"
					   placeholder="请输入库存"
					   name="bookNum"
					   class="w-full rounded-lg border-gray-300 border p-3 pl-10 form-input-focus transition-all duration-300">
			</div>

			<!-- 提交按钮 -->
			<div class="pt-2">
				<button type="submit"
						class="w-full bg-primary hover:bg-secondary text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center">
					<i class="fa fa-pencil mr-2"></i>确认修改
				</button>
			</div>

			<!-- 返回按钮 -->
			<div>
				<button type="button"
						onclick="history.back()"
						class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2.5 px-4 rounded-lg btn-hover mt-3 flex items-center justify-center">
					<i class="fa fa-arrow-left mr-2"></i>返回
				</button>
			</div>
		</form>
	</div>

	<!-- 页脚 -->
	<div class="text-center mt-12 text-gray-500 text-sm">
		<p>© 2023 图书管理系统 - 版权所有</p>
	</div>
</div>

<!-- 简单的表单验证脚本 -->
<script>
	document.querySelector('form').addEventListener('submit', function(e) {
		const bookName = document.getElementById('bookName').value.trim();
		const bookAuthor = document.getElementById('bookAuthor').value.trim();

		// 简单验证
		if (!bookName) {
			alert('请输入书名');
			e.preventDefault();
			return false;
		}

		if (!bookAuthor) {
			alert('请输入作者');
			e.preventDefault();
			return false;
		}

		return true;
	});

	// 输入框获取焦点时的动画效果
	const inputs = document.querySelectorAll('input[type="text"], input[type="number"]');
	inputs.forEach(input => {
		input.addEventListener('focus', function() {
			this.parentElement.classList.add('scale-[1.02]');
			this.parentElement.style.transition = 'transform 0.3s ease';
		});

		input.addEventListener('blur', function() {
			this.parentElement.classList.remove('scale-[1.02]');
		});
	});
</script>
</body>
</html>
